<template>
	<div class="reservation" >
		<div v-if="subjectItem.id">
			<div class="project_details" id="subjectDetail" >
				<div class="project_details-banner">
					<img :src="subjectItem.banner">
					<div class="text-center">
						<p class="mb0 shadow">{{subjectItem.name}}</p>
						<div class="split-line box_shadow" v-bind:class="{'mt10':!subjectItem.brief}"></div>
						<p class="mb0 shadow" v-bind:class="{'mt10':subjectItem.brief}" >{{subjectItem.brief}}</p>
					</div>
				</div>
				<p class="project_desc">{{subjectItem.description}}</p>
				<div class="project_details-info">
					<div class="info_block" v-for="good in subjectItem.goods">
						<router-link :src="good.cover | imgSize " :to="{ name: 'productDetail',params:{id:good.id }}" tag="img"/>
						<div class="p5" >
							 <p class="mb0 add-cart" >
							 <span style="width: 80%; display: inline-block;">{{good.name}}</span>
							 <span class="pull-right shopping-wrap"><i class="icon-shopping" v-on:click="addCart(good)"></i></span></p>
							 <br>
					    	<span>{{good.description}}</span>
						</div>
					</div>
				</div>
				<router-link class="cart"  tag="div" to="/mall/cart">
					<i class="num" id="cartNum">{{cartCount}}</i>
					<span class="icon-shopping"></span>
				</router-link>
			</div>
		</div>		
	</div>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex'
	import './subject.less'
	
	export default {
		computed: mapGetters({
			subjectItem: 'subjectItem',
			cartCount: 'cartCount'
		}),
		methods: {
			...mapActions([
			    'addCart'
			]),
		},
		created (){
			this.$store.dispatch( 'getCarts' );
			this.$store.dispatch( 'getSubjectItem', this.$route.params.subjectId );
		}
	}
</script>




